<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="gbk">
    <link rel="stylesheet" href="/static/css/supervise/region/region_style.css?v=2"/>
    <link rel="stylesheet" href="/static/css/supervise/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="/static/base/common/css/common.css" />
    <script type="text/javascript" src="/static/webjars/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/base/common/js/jquery.js"></script>
    <script type="text/javascript" src="/static/base/common/js/sapar.js"></script>
    <script type="text/javascript" src="/static/base/common/js/WdatePicker.js"></script>
    <script type="text/javascript" src="/static/webjars/echarts/echarts.js"></script>
    <!--引用百度地图API-->
    <script type="text/javascript" src="/static/js/supervise/bmap.min.js"></script>
    <style type="text/css">
        html,body{margin:0;padding:0;overflow: hidden;width:100%;height:100%;}
        .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
        .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
        .anchorBL{
            display:none;
        }
        .layui-card-header{
            color:#fff;
        }
        .layui-card{
            background-color:rgba(255,255,255,0.05);
        }

        .table-position .layui-card{
            width:100%;
            height:100%;
            background-color:#0D0D0D;
            color:white;
        }

        .table-position .layui-card-header{
            color:#fff;
            height:5%;
            background:#009688;
            padding:8px 0px;
            border-bottom: 0px;
        }

        .table-position .layui-card-body{
            height:85%;
            overflow-x:hidden ;
            overflow-y: auto;
        }
        .table-position .layui-card-body ul li{
            margin:10px 0px;
            width:100%;
            text-align: left;
        }
        .table-position .layui-card-body ul li a{
            color:white;
        }
        .table-position .layui-card-body ul li .user img{
            padding:0 5px;
            width:40px;
            height:40px;
            border-radius:50%;
        }

        /*滚动条样式设置*/
        .table-position .layui-card .layui-card-body::-webkit-scrollbar,dl::-webkit-scrollbar {/*滚动条整体样式*/
            width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 4px;
        }
        .table-position .layui-card .layui-card-body::-webkit-scrollbar-thumb,dl::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 5px;     -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0.1);
            background: rgba(0,0,255,0.05);
        }
        .table-position .layui-card .layui-card-body::-webkit-scrollbar-track,dl::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0.1);
            border-radius: 0;
            background: rgba(0,0,255,0.05);
        }


    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=${AK}"></script>
    <title>区域评价</title>
</head>

<body style="position:relative;" >
<canvas id="c" style=" position: absolute;top: 0;left: 0;background-color: black;position:absolute;z-index:0;width:100%;height:100%;"></canvas>
    <div class="layui-row layui-col-space15" style="height:50%;">


        <div class="layui-col-md8" style="height:100%;">
            <div class="layui-card" style="height:100%;">
                <div class="layui-card-header" style="height:5%;">兴文县城乡信息</div>
                <div class="layui-card-body row" style="height:90%;padding:0px;" >
                    <%--<div id="charts5" style="height: 790px;width: 1688px"></div>--%>
                    <!--百度地图容器-->
                    <div style="width:82%;height:100%;border:#ccc solid 0px;float: left;" id="dituContent"></div>
                        <div class="table-position" style="width:15%;height:100%;float:right;margin-right:15px;">
                            <div class="layui-card">
                                        <div class="layui-card-header">
                                            地理信息
                                        </div>
                                        <div class="layui-card-body">
                                            <ul>
                                                <c:forEach items="${towns}" var="town">
                                                    <li>
                                                        <div class="user">
                                                            <a href="javascript:void(0);" data-id="${town.townId}"><img src="/static/images/special/position.png" alt=""/><span>${town.townName}</span></a>
                                                        </div>
                                                    </li>
                                                </c:forEach>
                                            </ul>
                                        </div>
                            </div>
                        </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md4" style="height:25%;">
            <div class="layui-card" style="height:100%;">
                <div class="layui-card-header" style="height:10%;">区域事件处理量</div>
                <div class="layui-card-body" style="height: 90%;">
                    <div class="wrapper" >
                    <div class="counter col_fourth">
                        <i class="fa fa-code fa-2x"></i>
                        <h2 class="timer count-title" id="count-number1" data-to="300" data-speed="1500">300</h2>
                        <p class="count-text ">上报数</p>
                    </div>

                    <div class="counter col_fourth">
                        <i class="fa fa-coffee fa-2x"></i>
                        <h2 class="timer count-title" id="count-number2" data-to="17870" data-speed="1500">17870</h2>
                        <p class="count-text ">受理数</p>
                    </div>

                    </div>

                    <div class="counter col_fourth ">
                        <i class="fa fa-bug fa-2x"></i>
                        <h2 class="timer count-title" id="count-number3" data-to="157" data-speed="1500">157</h2>
                        <p class="count-text ">结案数</p>
                    </div>
                    <div class="counter col_fourth end">
                        <i class="fa fa-bug fa-2x"></i>
                        <h2 class="timer count-title" id="count-number4" data-to="1273" data-to="88%" data-speed="1500">88%</h2>
                        <p class="count-text ">总案件数</p>
                    </div>



                </div>
            </div>
        </div>
        <div class="layui-col-md4" style="height:25%;">
            <div class="layui-card" style="height:100%;">
                <div class="layui-card-body" style="height: 100%;">
                    <div class="wrapper">
                        <div class="counter col_fourth">
                            <i class="fa fa-code fa-2x"></i>
                            <h2 class="timer count-title" id="count-number5" >23%</h2>
                            <p class="count-text ">受理率</p>
                        </div>

                        <div class="counter col_fourth">
                            <i class="fa fa-coffee fa-2x"></i>
                            <h2 class="timer count-title" id="count-number6" >56%</h2>
                            <p class="count-text ">好评率</p>
                        </div>
                    </div>

                        <div class="counter col_fourth">
                            <i class="fa fa-bug fa-2x"></i>
                            <h2 class="timer count-title" id="count-number7" >88%</h2>
                            <p class="count-text ">投诉率</p>
                        </div>
                        <div class="counter col_fourth end">
                            <i class="fa fa-bug fa-2x"></i>
                            <h2 class="timer count-title" id="count-number8">78%</h2>
                            <p class="count-text ">事件发生率</p>
                        </div>

                </div>
            </div>
        </div>

        <div class="layui-col-md4" style="height:50%;">
            <div class="layui-card" style="height:100%;padding:0px;">
                <div class="layui-card-body" style="height:100%;padding:0px;">
                    <div id="charts" style="height: 100%;"></div>
                </div>
            </div>
        </div>

    </div>


<div class="layui-row layui-col-space15" style="height:50%;">
    <div class="layui-col-md12" style="height:100%;">
    <div class="layui-card" style="height:100%;">
        <div class="layui-card-body" style="height:100%;padding:0px;">
            <div id="charts1" style="height: 100%"></div>
        </div>
    </div>
</div>
</div>
</body>


<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/supervise/region/AreaRestriction_min.js"></script>
<script type="text/javascript" src="/static/js/supervise/region/map.js"></script>
<script type="text/javascript" src="/static/js/special/countUp.min.js"></script>
<script type="text/javascript" src="/static/js/supervise/region/region_static_show.js"></script>
<script type="text/javascript" src="/static/js/special/dat.gui.min.js"></script>
<script type="text/javascript" src="/static/js/special/index.js"></script>
</html>




















